<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/src/css/layui.css">
    <script src="./lib/jquery-3.1.0.min.js"></script>
    <script src="./layui/src/layui.js"></script>
</head>
<body>

    <form class="layui-form" style='margin-top: 50px;'>
        <div class="layui-form-item">
          <label class="layui-form-label">学生姓名：</label>
          <div class="layui-input-block">
            <input type="text" id="studentName"  placeholder="请输入姓名"  class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄：</label>
            <div class="layui-input-block">
              <input type="text" id="studentAge"  placeholder="请输入年龄"  class="layui-input">
            </div>
          </div>
        <div class="layui-form-item" style='margin-left: 100px;'>
        <!-- 上传图片 -->
        <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <div class="layui-upload-list" style="width:100px;height:100px;border:1px #ccc solid">
          <img class="layui-upload-img" id="demo1"  style="width:100px;height:100px;">
          <p id="demoText"></p>
        </div>
      </div>  
     </div>   
     <div class="layui-form-item">
        <div class="layui-input-block">
          <button id='addBtn'  type='button' class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
          <button  type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
      </form>       
</body>
</html>
<script>
    layui.use(['upload', 'element', 'layer'], function(){
      var $ = layui.jquery
      ,upload = layui.upload
      ,element = layui.element
      ,layer = layui.layer;
      
      //常规使用 - 普通图片上传
      var uploadInst = upload.render({
        elem: '#test1'
        ,url: '/api/student/addstudent' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        ,auto:false //不自动上传
        ,bindAction:"#addBtn" //绑定一个按钮来触发上传
        // 传入的其他的参数（除了文件以后的参数）
        ,data:{
            name:()=>$("#studentName").val(),
            age:()=>$("#studentAge").val(),
        }
        ,choose: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
            $('#demo1').attr('src', result); //图片链接（base64）
          });
        }
        ,done: function(res){
          //如果上传失败
          if(res.code > 0){
            return layer.msg('上传失败');
          }
          //上传成功的一些操作
          //……
          alert("上传成功");
          $('#demoText').html(''); //置空上传失败的状态
        }
        ,error: function(){
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
          });
        }
      });
       });
</script>
